<template>
  <a-modal
    :title="title"
    :visible="upload.open"
    :confirm-loading="upload.uploading"
    @cancel="importExcelHandleCancel"
    @ok="importExcelHandleOk"
  >
    <a-spin tip="上传中..." :spinning="upload.uploading">
      <a-upload-dragger
        name="file"
        accept=".xlsx, .xls"
        :file-list="upload.fileList"
        :multiple="false"
        :headers="upload.headers"
        :remove="handleRemove"
        :before-upload="beforeUpload"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">
          请将文件拖拽到此处上传
        </p>
        <p class="ant-upload-hint">
          支持单个上传，也可以点击后选择文件上传
        </p>
      </a-upload-dragger>
      <a-checkbox @change="handleCheckedUpdateSupport" :checked="upload.updateSupport != 0">
        {{ uploadMsg }}
      </a-checkbox>
      <a @click="importTemplate">下载模板</a>
    </a-spin>
  </a-modal>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { randomUUID } from '@/utils/util'
import http from '@/utils/http'

export default {
  name: 'ImportExcel',
  props: {
    title: { type: String, default: 'Excel导入' },
    uploadMsg: { type: String, default: '是否更新已经存在的数据' },
    uploadAction: { type: String, required: true }
  },
  components: {
  },
  data () {
    return {
      upload: {
        // 是否上传中
        uploading: false,
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        uploadStatus: '',
        fileList: [],
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          token: storage.get(ACCESS_TOKEN),
          timestamp: new Date().getTime(),
          requestId: randomUUID()
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + this.uploadAction
      }
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
  },
  watch: {
  },
  methods: {
    /** 下载模板操作 */
    importTemplate () {
      this.$emit('importTemplate')
    },
    /** 删除文件 */
    handleRemove(e) {
      this.upload.uploading = false
      this.upload.fileList = []
    },
    beforeUpload(file) {
      this.upload.fileList = [file]
      return false
    },
    /** 导入excel窗体开启 */
    importExcelHandleOpen (e) {
      this.upload.open = true
    },
    /** 导入excel窗体关闭 */
    importExcelHandleCancel(e) {
      this.upload.open = false
      this.upload.fileList = []
      // 关闭后刷新列表
      this.$emit('ok')
    },
    /** 导入excel窗体确认 */
    importExcelHandleOk () {
      if (this.upload.fileList.length === 0) {
        this.$message.error('请选择导入文件')
        return
      }
      const formData = new FormData()
      formData.append('file', this.upload.fileList[0])
      formData.append('updateSupport', this.upload.updateSupport !== 0)
      this.upload.uploading = true
      http({
        url: this.upload.url,
        method: 'post',
        data: formData
      }).then(result => {
        this.upload.open = false
        this.upload.uploading = false
        this.upload.fileList = []
        this.$message.success(result.msg)
        this.$emit('ok')
      }).catch(e => {
        this.upload.open = false
        this.upload.uploading = false
      })
    },
    handleCheckedUpdateSupport () {
      this.upload.updateSupport = this.upload.updateSupport === 0 ? 1 : 0
    }
  }
}
</script>
